<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import useForm from "@/hooks/useForm";
import API from "@/api/base";

import { ElForm, ElFormItem, ElInput, ElMessage } from "element-plus";

import appToken from "@/utils/appToken";
import setting from "@/utils/setting";

const route = useRoute();
const router = useRouter();

const rules = {
  account: { required: true, message: "请输入账号" },
  password: [
    { required: true, message: "请输入密码" },
    // { pattern: regMenu.password, message: "密码至少是6位数字+字母" },
  ],
};

const { refForm, data, isFetching, model, submit, onFetchResponse } = useForm<
  {
    account: string;
    password: string;
    code: number;
  },
  { accessToken: string }
>(API.login, {
  defaultModel: {
    // account: "13112341234",
    // password: "123456",
  },
});

onFetchResponse(() => {
  ElMessage.success("登录成功");
  appToken.setToken(data.value?.accessToken as string);
  const { redirect } = route.query;

  if (redirect) router.replace(redirect as string);
  else router.push("/");
});

// 背景
// @ts-ignore
import CanvasNest from "canvas-nest.js";
const refWrap = ref();
onMounted(() => {
  new CanvasNest(refWrap.value, {
    color: "0,0,255",
    opacity: 0.7,
    zIndex: -2,
    count: 99,
  });
});

import bgImg from "@/assets/images/login-bg.jpg";
</script>

<template>
  <div ref="refWrap" class="relative h-screen">
    <div
      class="absolute top-0 left-0 w-full h-full bg-white/30 bg-cover bg-top-center"
      :style="{ backgroundImage: `url(${bgImg})` }"
    />
    <div class="relative w-full h-full" />

    <div
      class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-5/6 h-full sm:w-3/4 sm:h-3/4 max-w-[500px] min-h-[300px] max-h-[430px]"
    >
      <div
        class="flex flex-col md:flex-row rounded-2xl overflow-hidden shadow-lg h-full"
      >
        <div class="flex-auto flex-center p-1 bg-white/86 backdrop-blur-sm">
          <div class="w-5/6 sm:w-3/4">
            <div class="flex-center mb-10 font-bold">
              <img src="@/assets/svg/logo.svg" class="w-[80px]" />
              <div class="ml-3 text-center">
                <span class="text-36px">{{ setting.name }}</span>
                <div class="text-2xl">Eatnival</div>
              </div>
            </div>

            <ElForm
              size="large"
              ref="refForm"
              :model="model"
              :rules="rules"
              label-position="top"
            >
              <ElFormItem label="账号" prop="account">
                <ElInput v-model="model.account" placeholder="用户名" />
              </ElFormItem>
              <ElFormItem prop="password" label="密码">
                <ElInput
                  v-model="model.password"
                  type="password"
                  placeholder="密码"
                  show-password
                  @keyup.enter="submit"
                />
              </ElFormItem>
            </ElForm>

            <ElButton
              class="w-full mt-3"
              size="large"
              type="primary"
              :loading="isFetching"
              @click="submit()"
              >登录
            </ElButton>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
